<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="login.css" />
    <title>景区室内外游览任务调度与群组推荐平台</title>
</head>
<body>
  <div class="box">
    <img style="max-height:100%;max-width: 68%;"  src="./img/bg@2x.png">
  </div>

    <div class="box-item">
      <img id="buity" src="./img/logo.png" style="width: 300px;height: 93px;position: absolute;left: 71%;top: 56px;">
      <div class="box2">
        <p id="text1">登录</p>
        <div>
          <p id="text2">游客</p>
          <div id="xian1"></div>
        </div>
        <div id="xian2"></div>
        <div>
          <p id="text3">景区</p>
          <div id="xian3"></div>
        </div>
        <div class="shuruk1"><input type="text" id="tip01" placeholder="用户名"></div>
        <div class="shuruk2"><input type="password" id="tip02" placeholder="密码"></div>
        <button class="but">登录</button>
        <p id="zhuce">没有账号？点击注册！</p>
      </div>
      <div class="box-item2" style="display: none;">
        <p id="text1">注册</p>
        <div class="shuruk20"><select id="tip00" placeholder="请选择用户身份">
          <option>游客</option>
          <option>景区</option>
          </select>
        </div>
        <div class="shuruk21"><input type="text" id="tip00" placeholder="请输入手机号"></div>
        <div class="shuruk22"><input type="password" id="tip03" placeholder="请输入验证码"></div> <button id="but2"><p>获取验证码</p></button>
        <div class="shuruk23"><input type="password" id="tip00" placeholder="请输入密码"></div>
        <button class="but">注册</button>
      </div>
    </div>
  
 <script>
let i=0
let zhuce=document.querySelector('#zhuce')
let jingqu=document.querySelector('#text3')
let youke=document.querySelector('#text2')
let xian1=document.querySelector('#xian1')
let xian3=document.querySelector('#xian3')
let anniu=document.querySelector('.but')
let hezi2=document.querySelector('.box-item2')
jingqu.addEventListener('click',function(){
 i =1
 youke.style.color='#C3C3C3'
 xian1.style.background='#C3C3C3'
 jingqu.style.color='#8B5A3E'
 xian3.style.background='#8B5A3E'
})

youke.addEventListener('click',function(){
 i =0
 youke.style.color='#8B5A3E'
 xian1.style.background='#8B5A3E'
 jingqu.style.color='#C3C3C3'
 xian3.style.background='#C3C3C3'
})

anniu.addEventListener('click',function(){
  if(i){
    window.location.href="jingqu-index.html"
  }else{
    window.location.href="youke-index.html"
  }
})
zhuce.addEventListener('click',function(){
  hezi2.style.display='block'
})
 </script>
</body>
</html>